<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 头部筛选表单 -->
      <div>
        <!-- 提示文字 -->
        <div class="tig">说明：目前支持学科和关键字条件筛选</div>
        <el-button
          size="small"
          @click="$router.push('new')"
          type="success"
          style="float: right; padding: 10px 15px; margin-top: -10px"
          ><i class="el-icon-edit"></i> 新增试题</el-button
        >
        <!-- 筛选表单域 -->
        <el-form ref="selectForm" :model="selectForm" label-width="80px">
          <el-row :gutter="10">
            <!-- 第一列筛选条件 -->
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <!-- 学科选择框 -->
              <el-form-item prop="subjectID" label="学科">
                <el-select
                  v-model="selectForm.subjectID"
                  placeholder="请选择学科"
                  @change="getMulu(selectForm.subjectID)"
                >
                  <el-option
                    v-for="item in subjectSimple"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 试题选择框 -->
              <el-form-item prop="questionType" label="试题类型">
                <el-select
                  v-model="selectForm.questionType"
                  placeholder="请选择试题类型"
                >
                  <el-option
                    v-for="item in questionType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 题目备注 -->
              <el-form-item prop="remarks" label="题目备注">
                <el-input
                  v-model="selectForm.remarks"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- 第二列 -->
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <!-- 二级目录 -->
              <el-form-item prop="catalogID" label="二级目录">
                <el-select
                  v-model="selectForm.catalogID"
                  placeholder="请选择二级目录"
                >
                  <el-option
                    v-for="item in catalogs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 难度 -->
              <el-form-item prop="difficulty" label="难度">
                <el-select
                  v-model="selectForm.difficulty"
                  placeholder="请选择难度"
                >
                  <el-option
                    v-for="item in diffData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 企业简称 -->
              <el-form-item prop="shortName" label="企业简称">
                <el-input
                  v-model="selectForm.shortName"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <!-- 标签 -->
              <el-form-item prop="tags" label="标签">
                <el-select v-model="selectForm.tags" placeholder="请选择标签">
                  <el-option
                    v-for="item in tags"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 方向 -->
              <el-form-item prop="direction" label="方向">
                <el-select
                  v-model="selectForm.direction"
                  placeholder="请选择方向"
                >
                  <el-option
                    v-for="item in direction"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 城市 -->
              <div class="city">
                <el-form-item prop="province" label="城市">
                  <el-select
                    v-model="selectForm.province"
                    placeholder="请选择"
                    @change="getCitys(selectForm.province)"
                  >
                    <el-option
                      v-for="item in provinces"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="city">
                  <el-select v-model="selectForm.city" placeholder="请选择">
                    <!-- <el-option label="请选择" value=""></el-option> -->
                    <el-option
                      v-for="item in citys"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
              <!-- 关键字 -->
              <el-form-item prop="keyword" label="关键字">
                <el-input
                  v-model="selectForm.keyword"
                  placeholder="根据题干搜索"
                >
                </el-input>
              </el-form-item>
              <!-- 录入人 -->
              <el-form-item prop="creatorID" label="录入人">
                <el-select v-model="selectForm.creatorID" placeholder="请选择">
                  <el-option
                    v-for="item in creator"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="sel-btn">
                <el-button @click="resetFields('selectForm')">清除</el-button>
                <el-button @click="selectQuestions" type="primary"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 获取总数据的提示信息 -->
      <div class="tagTotal">
        <i class="el-icon-info"></i>当前数据一共 {{ total }} 条
      </div>
      <!-- 题库展示body -->
      <el-table :data="questionData" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="180">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="180">
        </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column prop="questionType" label="题型" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty === '1'">单选</span>
            <span v-else-if="scope.row.difficulty === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="180">
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
          <template slot-scope="scope">
            {{ setMyDate(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="180">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.difficulty === "1" ? "简单" : "困难" }}</span> -->
            <el-tag v-if="scope.row.difficulty === '1'" type="success"
              >简单</el-tag
            >
            <el-tag v-else type="danger">困难</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="180">
        </el-table-column>
        <el-table-column class="operator" label="操作" width="200">
          <template slot-scope="scope">
            <div class="bottom">
              <el-tooltip
                class="item"
                effect="dark"
                content="预览"
                placement="bottom"
              >
                <!-- 操作按钮 -->
                <!-- 预览功能 -->
                <el-button
                  type="primary"
                  plain
                  size="small"
                  icon="el-icon-view"
                  circle
                  @click="lookQue(scope.row.id)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="bottom"
              >
                <!-- 编辑按钮 -->
                <el-button
                  type="success"
                  plain
                  size="small"
                  icon="el-icon-edit"
                  circle
                  @click="editQuestion(scope.row.id)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="bottom"
              >
                <!-- 删除按钮 -->
                <el-button
                  type="danger"
                  plain
                  size="small"
                  icon="el-icon-delete"
                  circle
                  @click="delQue(scope.row.id)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="加入精选"
                placement="bottom"
              >
                <!-- 精选按钮 -->
                <el-button
                  type="warning"
                  plain
                  size="small"
                  icon="el-icon-check"
                  circle
                  @click="choiceAdd(scope.row.id)"
                ></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 预览组件 -->
      <!-- 加v-if是为了避免初始化传一个空值 -->
      <preview-container
        v-if="isSel"
        :isShow.sync="isSel"
        :queId="queid"
      ></preview-container>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next, sizes, jumper"
        :page-sizes="[2, 5, 10, 15, 20]"
        :total="total"
        :page-size="pagesize"
        :current-page="page"
        @current-change="changePage"
        @size-change="changePageSize"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
// 导入获取基础题库列表方法
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
// 导入选项数据
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
// 导入学科简单列表
import { simple } from '@/api/hmmm/subjects'
// 导入目录选项列表
import { simple as mulu } from '@/api/hmmm/directorys'
// 导入简单标签列表
import { simple as getTags } from '@/api/hmmm/tags'
// 导入试题预览组件
import PreviewContainer from '@/module-hmmm/components/questions-preview.vue'
// 导入城市
import { provinces, citys } from '@/api/hmmm/citys'
// 导入格式化时间方法
import { setMyDate } from '@/utils/index'
export default {
  components: {
    PreviewContainer
  },
  data () {
    return {
      // 表单数据
      selectForm: {
        // 难易程度
        difficulty: null,
        // 学科选项
        subjectID: null,
        // 二级目录选项
        catalogID: null,
        // 问题类型
        questionType: null,
        // 方向
        direction: null,
        // 标签
        tags: null,
        // 省级选项
        province: null,
        // 城市
        city: null,
        // 录入人
        creatorID: null,
        // 关键字
        keyword: '',
        // 企业简称
        shortName: '',
        // 题目备注
        remarks: ''
      },
      // 基础题库数据列表
      questionData: [],
      // 数据总条数
      total: 0,
      // 每页显示的数据个数
      pagesize: 5,
      // 当前页数
      page: 1,
      // 难度数据
      diffData: difficulty,
      // 所有学科选项
      subjectSimple: [],
      // 二级目录选项
      catalogs: [],
      // 问题类型
      questionType: questionType,
      // 方向选项
      direction: direction,
      // 标签选项
      tags: [],
      // 省级选项
      provinces: provinces(),
      // 城市选项
      citys: [],
      // 录入人选项
      creator: [
        { label: '超级管理员', value: 2 },
        { label: '录入管理员', value: 1 }
      ],
      // 预览的id值
      questionID: -1,
      // 传输预览题数据
      // item: {},
      // 弹框开关
      isSel: false,
      queid: 0
    }
  },
  created () {
    this.loadQuestions()
    this.getSubjectSimple()
    this.selectQuestions()
    // this.getMulu()
  },
  methods: {
    // 格式化时间
    setMyDate (date) {
      return setMyDate(date)
    },
    // 获取基础题库数据列表
    async loadQuestions () {
      const params = this.selectForm
      params.page = this.page
      params.pagesize = this.pagesize
      const { data: res } = await list(params)
      this.questionData = res.items
      this.total = res.counts
      if (res.pages === 0) {
        this.page = 1
      }
    },
    // 筛选搜索基础题库数据列表
    selectQuestions () {
      this.page = 1
      this.loadQuestions()
    },
    // 清空表单
    resetFields (form) {
      this.$nextTick(() => {
        this.$refs[form].resetFields()
      })
    },
    // 获取当前页
    changePage (e) {
      this.page = e
      // 清空表单
      this.loadQuestions()
    },
    changePageSize (e) {
      this.pagesize = e
      this.loadQuestions()
    },
    // 获取学科选项
    async getSubjectSimple () {
      const { data: res } = await simple()
      this.subjectSimple = res
    },
    // 获取目录选项
    async getMulu (subjectID) {
      const datas = {
        subjectID: subjectID
      }
      // eslint-disable-next-line no-unused-vars
      const { data } = await mulu(datas)
      // console.log(data)
      this.catalogs = data
      // 调用获取标签项的方法
      this.loadTags(datas)
    },
    // 获取标签选项
    async loadTags (subjectID) {
      const { data } = await getTags(subjectID)
      this.tags = data
      // console.log(data)
    },
    // 获取城市
    getCitys (provinces) {
      this.citys = citys(provinces)
    },
    // 预览试题
    lookQue (id) {
      this.isSel = true
      this.queid = id
    },
    // 编辑试题
    editQuestion (id) {
      this.$router.push({ name: 'questions-new', params: { id: id } })
    },
    // 删除试题
    delQue (did) {
      const data = {
        id: did
      }
      this.$confirm('确认删除该试题吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(data)
        this.loadQuestions()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 加入精选题库
    async choiceAdd (id) {
      const params = {
        choiceState: 1,
        id: id
      }
      try {
        await choiceAdd(params)
        this.loadQuestions()
        this.$message.success('添加精选题库成功！')
      } catch (error) {
        this.$message('添加精选题库失败！')
      }
    }
  }
}
</script>

<style scoped lang='less'>
.box-card {
  margin: 10px 10px 20px 10px;
  .tig {
    font-size: 12px;
    color: #ffc0cb;
  }
  .el-row {
    margin-top: 50px;
    .el-select {
      width: 100%;
    }
    .city {
      display: flex;
      justify-content: space-around;
      // justify-content: space-between;
      // .el-select {
      //   width: 49%;
      // }
    }
    .sel-btn {
      float: right;
    }
  }
  .tagTotal {
    background-color: #f4f4f5;
    padding: 10px 20px;
    border-radius: 5px;
    color: #909399;
    font-size: 14px;
    margin-bottom: 20px;
    i {
      margin-right: 6px;
    }
  }
  .operator {
    display: flex;
    justify-content: space-between;
    div {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
  .el-pagination {
    margin: 20px 0;
    float: right;
  }
}
</style>
